<html class=" js flexbox flexboxlegacy canvas canvastext postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache" style=""><!--<![endif]--><head>
	
	
	<title>CSS3 Menu Generator - CSS Portal</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="
http://www.cssportal.com/css/bootstrap.min.css">
	
	<!-- Font Awesome -->
	
	<!--[if IE 7]>
		<link rel="stylesheet" type="text/css" href="../css/font-awesome-ie7.min.css">
	<![endif]-->
	<!-- End Font Awesome -->
	
	
	
	<!--[if (gt IE 9)|!(IE)]><!-->
		
		
	<!--<![endif]-->
	
	<link rel="stylesheet" type="text/css" href="http://www.cssportal.com/css/main.css">
	
	
	
	
	
	
	
	<script type="text/javascript" src="http://www.cssportal.com/js/vendor/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.cssportal.com/js/vendor/bootstrap.min.js"></script>
	<link href="http://www.cssportal.com/css3-menu-generator/menu.css" rel="stylesheet" type="text/css">
	<script src="http://www.cssportal.com/scripts/jquery-ui.custom.js"></script>
	<link rel="stylesheet" href="http://www.cssportal.com/scripts/jquery-ui.css" media="screen">	
	<script type="text/javascript" src="http://www.cssportal.com/scripts/jscolor/jscolor.js"></script>
	<script src="http://www.cssportal.com/css3-menu-generator/js/values.js"></script>
	<script src="http://www.cssportal.com/css3-menu-generator/js/menu.js"></script>

	
<style type="text/css">#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 3px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 23px;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
  background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  border: solid 2px #6D6D6D;
  position:relative;
  z-index:999;
}
#menu-bar li {
  margin: 0px 0px 6px 0px;
  padding: 0px 6px 0px 6px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 6px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
  background: #0399D4;
  background: linear-gradient(top,  #EBEBEB,  #A1A1A1);
  background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #0399D4 !important;
  background: linear-gradient(top,  #04ACEC,  #0186BA) !important;
  background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #C8FF75 !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  background: linear-gradient(top,  #FFFFFF,  #CFCFCF);
  background: -ms-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 34px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:5px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: -12px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}</style></head>
<body onload="updatemenu()" class="wide" data-twttr-rendered="true">
	<div class="layout">
		<!-- Header -->
		
		<!-- End Header -->
		<!-- Main -->
		<div class="main">
			<div class="container">
				<div class="row">
					<div class="span12">
						<!-- Content -->
						<div class="content">
							<!-- Single Page -->
								<section class="page">
									
									
									

<!--Start Generator-->
<div class="examples">
<div class="topic">Menu Preview</div>
	<p style="text-align:center">
		<label for="cont-color">Container Color : </label>
		<input class="color {hash:true}" id="cont-color" value="#ffffff" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" autocomplete="off">
	</p>
	<div id="demo-container" style="background-color: rgb(255, 255, 255);">
	<ul id="menu-bar">
		<li class="active"><a href="#"><span id="active">Home</span></a></li>
		<li><a href="#">Products</a>
			<ul>
				<li><a href="#">Products Sub Menu 1</a></li>
				<li><a href="#">Products Sub Menu 2</a></li>
				<li><a href="#">Products Sub Menu 3</a></li>
				<li><a href="#">Products Sub Menu 4</a></li>
			</ul>
		</li>
		<li><a href="#">Services</a>
			<ul>
				<li><a href="#">Services Sub Menu 1</a></li>
				<li><a href="#">Services Sub Menu 2</a></li>
				<li><a href="#">Services Sub Menu 3</a></li>
				<li><a href="#">Services Sub Menu 4</a></li>
			</ul>
		</li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
	</div>
</div>

<div class="examples">
<div class="topic">Menu Options</div>
	<!-- Tabs Navigation -->
	<ul id="tabs" class="tabs nav nav-tabs">
		<li class="active"><a href="#tab1" data-toggle="tab"><i class="icon-edit"></i> Menu Bar</a></li>
		<li class=""><a href="#tab2" data-toggle="tab"><i class="icon-edit"></i> Top Menu</a></li>
		<li class=""><a href="#tab3" data-toggle="tab"><i class="icon-edit"></i> Top Menu Hover</a></li>
		<li class=""><a href="#tab4" data-toggle="tab"><i class="icon-edit"></i> Sub Menu</a></li>
		<li class=""><a href="#tab5" data-toggle="tab"><i class="icon-edit"></i> Sub Menu Hover</a></li>
	</ul>
	
	
	<div id="tabsContent" class="tab-content">
		<div class="tab-pane fade active in" id="tab1">
			<div class="row-fluid">
				<div class="span4">
					<div class="content-box">
					<h3>Corner Radius</h3>
					<p>
						<label for="radius-value">Radius All Corners:</label>
						<strong class="text-info"><span id="radius-value">23</span>px</strong>
					</p>
					<div id="slider_radius-value" class="slider radius ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 46%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 46%;"></a></div>
					</div>
					<div class="content-box">
					<h3>Background</h3>
					<input type="radio" name="background-menu" value="solid" id="solid-back" onchange="updatemenu()"><label for="solid-back">&nbsp;Solid Background</label>
					<p>
						<label for="back-color">Background Color : </label>
						<input class="color {hash:true}" id="back-color" value="#8b8b8b" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(139, 139, 139); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					<input type="radio" name="background-menu" value="gradient" id="gradient-back" checked="checked" onchange="updatemenu()"><label for="gradient-back" style="width:200px !important">&nbsp;Gradient Background</label>
					<p>
						<label for="start-color">Start Color : </label>
						<input class="color {hash:true}" id="start-color" value="#a9a9a9" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(169, 169, 169); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					<p>
						<label for="end-color">End Color : </label>
						<input class="color {hash:true}" id="end-color" value="#7a7a7a" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(122, 122, 122); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Colors and Border</h3>
					<p>
						<label for="border-width">Bottom Width:</label>
						<strong class="text-info"><span id="border-width">2</span>px</strong>
					</p>
					<div id="slider_border-width" class="slider border ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 20%;"></a></div>
					<p>
						<label for="border-style">Border Style : </label>
							<select onchange="updatemenu()" id="border-style">
							  <option value="solid">Solid</option>
							  <option value="dashed">Dashed</option>
							  <option value="dotted">Dotted</option>
							  <option value="double">Double</option>
							  <option value="groove">Groove</option>
							  <option value="inset">Inset</option>
							  <option value="outset">Outset</option>
							  <option value="ridge">Ridge</option>
							</select>
					</p>
					<p>
						<label for="bc-color">Border Color : </label>
						<input class="color {hash:true}" id="bc-color" value="#6d6d6d" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(109, 109, 109); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					<h3>Menu Bar Height</h3>
					<p>
						<label for="mb-height">Menu Bar Height : </label>
						<strong class="text-info"><span id="mb-height">34</span>px</strong>
					</p>
					<div id="slider_mb-height" class="slider height ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 40%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 40%;"></a></div>
					
					</div>
					<div class="content-box">
					<h3>Menu Bar Shadow</h3>
					<p>
						<label for="h-length-value">Horizontal Length:</label>
						<strong class="text-info"><span id="h-length-value">2</span>px</strong>
					</p>
					<div id="slider_h-length-value" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="v-length-value">Vertical Length:</label>
						<strong class="text-info"><span id="v-length-value">2</span>px</strong>
					</p>
					<div id="slider_v-length-value" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="b-length-value">Blur Radius:</label>
						<strong class="text-info"><span id="b-length-value">3</span>px</strong>
					</p>
					<div id="slider_b-length-value" class="slider blur ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 12%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 12%;"></a></div>
					<p>
						<label for="s-color">Shadow Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="s-color" value="#666666" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(102, 102, 102); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Padding</h3>
					<p>
						<label for="padding-top">Padding Top:</label>
						<strong class="text-info"><span id="padding-top">6</span>px</strong>
					</p>
					<div id="slider_padding-top" class="slider padding6 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 24%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 24%;"></a></div>
					<p>
						<label for="padding-right">Padding Right:</label>
						<strong class="text-info"><span id="padding-right">3</span>px</strong>
					</p>
					<div id="slider_padding-right" class="slider padding6 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 12%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 12%;"></a></div>
					<p>
						<label for="padding-bottom">Padding Bottom:</label>
						<strong class="text-info"><span id="padding-bottom">0</span>px</strong>
					</p>
					<div id="slider_padding-bottom" class="slider padding7 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="padding-left">Padding Left:</label>
						<strong class="text-info"><span id="padding-left">6</span>px</strong>
					</p>
					<div id="slider_padding-left" class="slider padding6 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 24%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 24%;"></a></div>
					</div>
					<div class="content-box">
					<h3>Margins</h3>
					<p>
						<label for="margin-top">Margin Top:</label>
						<strong class="text-info"><span id="margin-top">0</span>px</strong>
					</p>
					<div id="slider_margin-top" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="margin-right">Margin Right:</label>
						<strong class="text-info"><span id="margin-right">0</span>px</strong>
					</p>
					<div id="slider_margin-right" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="margin-bottom">Margin Bottom:</label>
						<strong class="text-info"><span id="margin-bottom">0</span>px</strong>
					</p>
					<div id="slider_margin-bottom" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="margin-left">Margin Left:</label>
						<strong class="text-info"><span id="margin-left">0</span>px</strong>
					</p>
					<div id="slider_margin-left" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					</div>
				</div>
			</div>
		</div>
	
		<div class="tab-pane fade" id="tab2">
			<div class="row-fluid">
				<div class="span4">
					<div class="content-box">
					<h3>Fonts</h3>
					<p>
						<label for="font-name-top">Font : </label>
							<select onchange="updatemenu()" id="font-name-top">
							  <option value="arial">Arial</option>
							  <option value="'arial black'">Arial Black</option>
							  <option value="'comic sans ms'">Comic Sans MS</option>
							  <option value="'courier new'">Courier New</option>
							  <option value="georgia">Georgia</option>
							  <option value="helvetica">Helvetica</option>
							  <option value="impact">Impact</option>
							  <option value="'times new roman'">Times New Roman</option>
							  <option value="'trebuchet ms'">Trebuchet MS</option>
							  <option value="verdana">Verdana</option>
							</select>
					</p>
					<p>
						<label for="font-style-top">Font Style : </label>
							<select onchange="updatemenu()" id="font-style-top">
							  <option value="normal">Normal</option>
							  <option value="italic">Italic</option>
							  <option value="oblique">Oblique</option>
							</select>
					</p>
					<p>
						<label for="font-weight-top">Font Weight : </label>
							<select onchange="updatemenu()" id="font-weight-top">
							  <option value="normal">Normal</option>
							  <option selected="selected" value="bold">Bold</option>
							  <option value="bolder">Bolder</option>
							  <option value="lighter">Lighter</option>
							</select>
					</p>
					<p>
						<label for="font-size-top">Font Size:</label>
						<strong class="text-info"><span id="font-size-top">12</span>px</strong>
					</p>
					<div id="slider_font-size-top" class="slider fontsize ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 15.555555555555555%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 15.555555555555555%;"></a></div>
					<p>
						<label for="font-color-top">Font Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="font-color-top" value="#e7e5e5" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(231, 229, 229); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					
					</div>
					<div class="content-box">
					<h3>Font Shadow</h3>
					<p>
						<label for="h-length-top">Horizontal Length:</label>
						<strong class="text-info"><span id="h-length-top">2</span>px</strong>
					</p>
					<div id="slider_h-length-top" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="v-length-top">Vertical Length:</label>
						<strong class="text-info"><span id="v-length-top">2</span>px</strong>
					</p>
					<div id="slider_v-length-top" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="b-length-top">Blur Radius:</label>
						<strong class="text-info"><span id="b-length-top">3</span>px</strong>
					</p>
					<div id="slider_b-length-top" class="slider blur ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 12%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 12%;"></a></div>
					<p>
						<label for="shadow-color-top">Shadow Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="shadow-color-top" value="#000000" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Padding</h3>
					<p>
						<label for="top-padding-top">Padding Top:</label>
						<strong class="text-info"><span id="top-padding-top">0</span>px</strong>
					</p>
					<div id="slider_top-padding-top" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="top-padding-right">Padding Right:</label>
						<strong class="text-info"><span id="top-padding-right">6</span>px</strong>
					</p>
					<div id="slider_top-padding-right" class="slider padding6 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 24%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 24%;"></a></div>
					<p>
						<label for="top-padding-bottom">Padding Bottom:</label>
						<strong class="text-info"><span id="top-padding-bottom">0</span>px</strong>
					</p>
					<div id="slider_top-padding-bottom" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="top-padding-left">Padding Left:</label>
						<strong class="text-info"><span id="top-padding-left">6</span>px</strong>
					</p>
					<div id="slider_top-padding-left" class="slider padding6 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 24%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 24%;"></a></div>
					</div>
					<div class="content-box">
					<h3>Margins</h3>
					<p>
						<label for="top-margin-top">Margin Top:</label>
						<strong class="text-info"><span id="top-margin-top">0</span>px</strong>
					</p>
					<div id="slider_top-margin-top" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="top-margin-right">Margin Right:</label>
						<strong class="text-info"><span id="top-margin-right">0</span>px</strong>
					</p>
					<div id="slider_top-margin-right" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="top-margin-bottom">Margin Bottom:</label>
						<strong class="text-info"><span id="top-margin-bottom">6</span>px</strong>
					</p>
					<div id="slider_top-margin-bottom" class="slider padding6 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 24%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 24%;"></a></div>
					<p>
						<label for="top-margin-left">Margin Left:</label>
						<strong class="text-info"><span id="top-margin-left">0</span>px</strong>
					</p>
					<div id="slider_top-margin-left" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Corner Radius</h3>
					<p>
						<label for="radius-top">Radius All Corners:</label>
						<strong class="text-info"><span id="radius-top">10</span>px</strong>
					</p>
					<div id="slider_radius-top" class="slider radius1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 20%;"></a></div>
					</div>
				</div>
			</div>
		</div>
	
		<div class="tab-pane fade" id="tab3">
			<div class="row-fluid">
				<div class="span4">
					<div class="content-box">
					<h3>Hover Text Color</h3>
					<p>
						<label for="text-color-hover-top">Text Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="text-color-hover-top" value="#444444" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(68, 68, 68); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					</div>
					<div class="content-box">
					<h3>Background</h3>
					<input type="radio" name="background-hover-top" value="solid-hover-top" id="solid-back-hover-top" onchange="updatemenu()"><label for="solid-back-hover-top">&nbsp;Solid Background</label>
					<p>
						<label for="back-color-hover-top">Background Color : </label>
						<input class="color {hash:true}" id="back-color-hover-top" value="#0399d4" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(3, 153, 212); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					<input type="radio" name="background-hover-top" value="gradient-hover-top" id="gradient-back-hover-top" checked="checked" onchange="updatemenu()"><label for="gradient-back-hover-top" style="width:200px !important">&nbsp;Gradient Background</label>
					<p>
						<label for="start-color-hover-top">Start Color : </label>
						<input class="color {hash:true}" id="start-color-hover-top" value="#ebebeb" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(235, 235, 235); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					<p>
						<label for="end-color-hover-top">End Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="end-color-hover-top" value="#a1a1a1" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(161, 161, 161); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Hover Font Shadow</h3>
					<p>
						<label for="h-shadow-hover-top">Horizontal Length:</label>
						<strong class="text-info"><span id="h-shadow-hover-top">2</span>px</strong>
					</p>
					<div id="slider_h-shadow-hover-top" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="v-shadow-hover-top">Vertical Length:</label>
						<strong class="text-info"><span id="v-shadow-hover-top">2</span>px</strong>
					</p>
					<div id="slider_v-shadow-hover-top" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="b-shadow-hover-top">Blur Radius:</label>
						<strong class="text-info"><span id="b-shadow-hover-top">3</span>px</strong>
					</p>
					<div id="slider_b-shadow-hover-top" class="slider blur ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 12%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 12%;"></a></div>
					<p>
						<label for="s-color-hover-top">Shadow Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="s-color-hover-top" value="#ffffff" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Padding</h3>
					<p>
						<label for="padding-top-hover">Padding Top:</label>
						<strong class="text-info"><span id="padding-top-hover">6</span>px</strong>
					</p>
					<div id="slider_padding-top-hover" class="slider padding6 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 24%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 24%;"></a></div>
					<p>
						<label for="padding-right-hover">Padding Right:</label>
						<strong class="text-info"><span id="padding-right-hover">20</span>px</strong>
					</p>
					<div id="slider_padding-right-hover" class="slider padding3 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 80%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 80%;"></a></div>
					<p>
						<label for="padding-bottom-hover">Padding Bottom:</label>
						<strong class="text-info"><span id="padding-bottom-hover">6</span>px</strong>
					</p>
					<div id="slider_padding-bottom-hover" class="slider padding6 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 24%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 24%;"></a></div>
					<p>
						<label for="padding-left-hover">Padding Left:</label>
						<strong class="text-info"><span id="padding-left-hover">20</span>px</strong>
					</p>
					<div id="slider_padding-left-hover" class="slider padding3 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 80%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 80%;"></a></div>
					</div>
				</div>
			</div>
		</div>
	
		<div class="tab-pane fade" id="tab4">
			<div class="row-fluid">
				<div class="span4">
					<div class="content-box">
					<h3>Fonts</h3>
					<p>
						<label for="font-name-sub" style="width:100px">Font : </label>
							<select onchange="updatemenu()" id="font-name-sub">
							  <option value="arial">Arial</option>
							  <option value="'arial black'">Arial Black</option>
							  <option value="'comic sans ms'">Comic Sans MS</option>
							  <option value="'courier new'">Courier New</option>
							  <option value="georgia">Georgia</option>
							  <option value="helvetica">Helvetica</option>
							  <option value="impact">Impact</option>
							  <option value="'times new roman'">Times New Roman</option>
							  <option value="'trebuchet ms'">Trebuchet MS</option>
							  <option value="verdana">Verdana</option>
							</select>
					</p>
					<p>
						<label for="font-style-sub">Font Style : </label>
							<select onchange="updatemenu()" id="font-style-sub">
							  <option value="normal">Normal</option>
							  <option value="italic">Italic</option>
							  <option value="oblique">Oblique</option>
							</select>
					</p>
					<p>
						<label for="font-weight-sub">Font Weight : </label>
							<select onchange="updatemenu()" id="font-weight-sub">
							  <option value="normal">Normal</option>
							  <option value="bold">Bold</option>
							  <option value="bolder">Bolder</option>
							  <option value="lighter">Lighter</option>
							</select>
					</p>
					<p>
						<label for="font-size-sub">Font Size:</label>
						<strong class="text-info"><span id="font-size-sub">12</span>px</strong>
					</p>
					<div id="slider_font-size-sub" class="slider fontsize ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 15.555555555555555%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 15.555555555555555%;"></a></div>
					<p>
						<label for="font-color-sub">Font Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="font-color-sub" value="#424242" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(66, 66, 66); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					
					</div>
					<div class="content-box">
					<h3>Font Shadow</h3>
					<p>
						<label for="h-length-sub">Horizontal Length:</label>
						<strong class="text-info"><span id="h-length-sub">-12</span>px</strong>
					</p>
					<div id="slider_h-length-sub" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 20%;"></a></div>
					<p>
						<label for="v-length-sub">Vertical Length:</label>
						<strong class="text-info"><span id="v-length-sub">2</span>px</strong>
					</p>
					<div id="slider_v-length-sub" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="b-length-sub">Blur Radius:</label>
						<strong class="text-info"><span id="b-length-sub">3</span>px</strong>
					</p>
					<div id="slider_b-length-sub" class="slider blur ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 12%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 12%;"></a></div>
					<p>
						<label for="shadow-color-sub">Shadow Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="shadow-color-sub" value="#ffffff" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					</div>
					<div class="content-box">
					<h3>Corner Radius</h3>
					<p>
						<label for="radius-sub">Radius All Corners:</label>
						<strong class="text-info"><span id="radius-sub">10</span>px</strong>
					</p>
					<div id="slider_radius-sub" class="slider radius1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 20%;"></a></div>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Background</h3>
					<input type="radio" name="background-sub" value="solid-sub" id="solid-back-sub" onchange="updatemenu()"><label for="solid-back-sub">&nbsp;Solid Background</label>
					<p>
						<label for="back-color-sub">Background Color : </label>
						<input class="color {hash:true}" id="back-color-sub" value="#dddddd" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(221, 221, 221); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					<input type="radio" name="background-sub" value="gradient-sub" id="gradient-back-sub" checked="checked" onchange="updatemenu()"><label for="gradient-back-sub" style="width:200px !important">&nbsp;Gradient Background</label>
					<p>
						<label for="start-color-sub">Start Color : </label>
						<input class="color {hash:true}" id="start-color-sub" value="#ffffff" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					<p>
						<label for="end-color-sub">End Color : </label>
						<input class="color {hash:true}" id="end-color-sub" value="#cfcfcf" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(207, 207, 207); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					</div>
					<div class="content-box">
					<h3>Border</h3>
					<p>
						<label for="border-width-sub">Border Width:</label>
						<strong class="text-info"><span id="border-width-sub">1</span>px</strong>
					</p>
					<div id="slider_border-width-sub" class="slider border ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 10%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 10%;"></a></div>
					<p>
						<label for="border-style-sub">Border Style : </label>
							<select onchange="updatemenu()" id="border-style-sub">
							  <option value="solid">Solid</option>
							  <option value="dashed">Dashed</option>
							  <option value="dotted">Dotted</option>
							  <option value="double">Double</option>
							  <option value="groove">Groove</option>
							  <option value="inset">Inset</option>
							  <option value="outset">Outset</option>
							  <option value="ridge">Ridge</option>
							</select>
					</p>
					<p>
						<label for="bc-color-sub">Border Color : </label>
						<input class="color {hash:true}" id="bc-color-sub" value="#b4b4b4" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(180, 180, 180); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					<hr>
					<p>
						<label for="width-sub">Sub Menu Width : </label>
						<strong class="text-info"><span id="width-sub">185</span>px</strong>
					</p>
					<div id="slider_width-sub" class="slider width ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 45%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 45%;"></a></div>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Sub Menu Box Shadow</h3>
					<p>
						<label for="h-shadow-sub">Horizontal Length:</label>
						<strong class="text-info"><span id="h-shadow-sub">2</span>px</strong>
					</p>
					<div id="slider_h-shadow-sub" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="v-shadow-sub">Vertical Length:</label>
						<strong class="text-info"><span id="v-shadow-sub">2</span>px</strong>
					</p>
					<div id="slider_v-shadow-sub" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="b-shadow-sub">Blur Radius:</label>
						<strong class="text-info"><span id="b-shadow-sub">3</span>px</strong>
					</p>
					<div id="slider_b-shadow-sub" class="slider blur ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 12%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 12%;"></a></div>
					<p>
						<label for="s-color-sub">Shadow Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="s-color-sub" value="#222222" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(34, 34, 34); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					</div>
					<div class="content-box">
					<h3>Padding</h3>
					<p>
						<label for="sub-padding-top">Padding Top:</label>
						<strong class="text-info"><span id="sub-padding-top">5</span>px</strong>
					</p>
					<div id="slider_sub-padding-top" class="slider padding4 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 20%;"></a></div>
					<p>
						<label for="sub-padding-right">Padding Right:</label>
						<strong class="text-info"><span id="sub-padding-right">0</span>px</strong>
					</p>
					<div id="slider_sub-padding-right" class="slider padding ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
					<p>
						<label for="sub-padding-bottom">Padding Bottom:</label>
						<strong class="text-info"><span id="sub-padding-bottom">10</span>px</strong>
					</p>
					<div id="slider_sub-padding-bottom" class="slider padding4 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 40%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 40%;"></a></div>
					<p>
						<label for="sub-padding-left">Padding Left:</label>
						<strong class="text-info"><span id="sub-padding-left">15</span>px</strong>
					</p>
					<div id="slider_sub-padding-left" class="slider padding5 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 60%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 60%;"></a></div>
					</div>
				</div>
			</div>
		</div>
	
		<div class="tab-pane fade" id="tab5">
			<div class="row-fluid">
				<div class="span4">
					<div class="content-box">
					<h3>Hover Text Color</h3>
					<p>
						<label for="text-color-hover">Text Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="text-color-hover" value="#ffffff" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(200, 255, 117); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					</div>
					<div class="content-box">
					<h3>Background</h3>
					<input type="radio" name="background-hover" value="solid-hover" id="solid-back-hover" onchange="updatemenu()"><label for="solid-back-hover">&nbsp;Solid Background</label>
					<p>
						<label for="back-color-hover">Background Color : </label>
						<input class="color {hash:true}" id="back-color-hover" value="#0399d4" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(3, 153, 212); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					<input type="radio" name="background-hover" value="gradient-hover" id="gradient-back-hover" checked="checked" onchange="updatemenu()"><label for="gradient-back-hover" style="width:200px !important">&nbsp;Gradient Background</label>
					<p>
						<label for="start-color-hover">Start Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="start-color-hover" value="#04acec" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(4, 172, 236); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					<p>
						<label for="end-color-hover">End Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="end-color-hover" value="#0186ba" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(1, 134, 186); color: rgb(255, 255, 255);" autocomplete="off">
					</p>
					</div>
				</div>
				<div class="span4">
					<div class="content-box">
					<h3>Hover Font Shadow</h3>
					<p>
						<label for="h-shadow-hover">Horizontal Length:</label>
						<strong class="text-info"><span id="h-shadow-hover">2</span>px</strong>
					</p>
					<div id="slider_h-shadow-hover" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="v-shadow-hover">Vertical Length:</label>
						<strong class="text-info"><span id="v-shadow-hover">2</span>px</strong>
					</p>
					<div id="slider_v-shadow-hover" class="slider shadow ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.00000000000001%;"></a></div>
					<p>
						<label for="b-shadow-hover">Blur Radius:</label>
						<strong class="text-info"><span id="b-shadow-hover">3</span>px</strong>
					</p>
					<div id="slider_b-shadow-hover" class="slider blur ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 12%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 12%;"></a></div>
					<p>
						<label for="s-color-hover">Shadow Color : </label>
						<input class="color {pickerPosition:'top',hash:true}" id="s-color-hover" value="#ffffff" type="text" onchange="updatemenu()" style="width: 65px; background-image: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" autocomplete="off">
					</p>
					</div>
				</div>
				<div class="span4">
				</div>
			</div>
		</div>
	</div>
</div>


						
</div>

<div class="examples">
<div class="topic">CSS Code</div>
<pre class="prettyprint linenums" style="height:300px;overflow:scroll;" id="newcode">#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 3px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 23px;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
  background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  border: solid 2px #6D6D6D;
  position:relative;
  z-index:999;
}
#menu-bar li {
  margin: 0px 0px 6px 0px;
  padding: 0px 6px 0px 6px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 6px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar .active a, #menu-bar li:hover &gt; a {
  background: #0399D4;
  background: linear-gradient(top,  #EBEBEB,  #A1A1A1);
  background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #0399D4 !important;
  background: linear-gradient(top,  #04ACEC,  #0186BA) !important;
  background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #C8FF75 !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  background: linear-gradient(top,  #FFFFFF,  #CFCFCF);
  background: -ms-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 34px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover &gt; ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:5px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: -12px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child &gt; a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child &gt; a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}</pre>
</div>

<div class="examples">
<div class="topic">HTML Code</div>
<pre class="prettyprint linenums" style="overflow:auto;"><ol class="linenums"><li class="L0"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"menu-bar"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln"> </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Home</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L2"><span class="pln"> </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Products</span><span class="tag">&lt;/a&gt;</span></li><li class="L3"><span class="pln">  </span><span class="tag">&lt;ul&gt;</span></li><li class="L4"><span class="pln">   </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Products Sub Menu 1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L5"><span class="pln">   </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Products Sub Menu 2</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L6"><span class="pln">   </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Products Sub Menu 3</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L7"><span class="pln">   </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Products Sub Menu 4</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L8"><span class="pln">  </span><span class="tag">&lt;/ul&gt;</span></li><li class="L9"><span class="pln"> </span><span class="tag">&lt;/li&gt;</span></li><li class="L0"><span class="pln"> </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Services</span><span class="tag">&lt;/a&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;ul&gt;</span></li><li class="L2"><span class="pln">   </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Services Sub Menu 1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L3"><span class="pln">   </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Services Sub Menu 2</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L4"><span class="pln">   </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Services Sub Menu 3</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L5"><span class="pln">   </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Services Sub Menu 4</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L6"><span class="pln">  </span><span class="tag">&lt;/ul&gt;</span></li><li class="L7"><span class="pln"> </span><span class="tag">&lt;/li&gt;</span></li><li class="L8"><span class="pln"> </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">About</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L9"><span class="pln"> </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Contact Us</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></li><li class="L0"><span class="tag">&lt;/ul&gt;</span></li></ol></pre>
</div>
<!--End Generator-->
								</section>
								<!-- End Single Page -->
						</div>
						<!-- End Content -->
					</div>
				</div>
			</div>
		</div>
		<!-- End Main -->
		<!-- Ticker -->
		
		<!-- End Ticker -->
		
		
		<!-- End Footer -->
	</div>
	
	

	<!--[if lte IE 9]>
		<script type="text/javascript" src="../js/vendor/jquery.placeholder.min.js"></script>
		<script type="text/javascript" src="../js/vendor/jquery.menu.min.js"></script>
		<script type="text/javascript">
			/* <![CDATA[ */
			jQuery.noConflict();

			(function ($) {
				$(function () {
					// Menu effect
					$('#nav .menu').menu({'effect' : 'fade'});
				});
			})(jQuery);
			/* ]]> */
		</script>
	<![endif]-->
</body></html>